<template>
    <a-form-model ref="form"  :model="formData" :rules="rules" layout="vertical" style="padding:16px 16px 0" class="x-a-form-model">
        <a-row :gutter="24">
            <a-col :span="12">
                <a-form-model-item  :label="i18n('name','名称')" prop = "name">
                    <a-input :placeholder="i18n('name','请输入名称','input')" v-model="formData.name"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item  :label="i18n('key','别名')" prop = "key" class="x-a-form-model-error">
                    <a-input :placeholder="i18n('key','请输入别名','input')" v-model="formData.key"/>
                </a-form-model-item>
            </a-col>

            <a-col :span="12">
                <a-form-model-item  :label="i18n('category','分类')" prop = "treeId">
                    <rx-category-select v-if="isShowManageTree" :isAdmin="isManageToTree" cat-key="FORM" :isGrant="true" v-model="formData.treeId"></rx-category-select>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item  :label="i18n('port','端口号')" prop = "port">
                    <a-input-number :min="1" :placeholder="i18n('port','请输入端口号','input')" v-model="formData.port"/>
                </a-form-model-item>
            </a-col>

            <a-col :span="24">
                <a-form-model-item  :label="i18n('desc','描述')" prop = "desc" >
                    <a-textarea :placeholder="i18n('desc','请输入描述','input')" :rows="4" v-model="formData.desc"/>
                </a-form-model-item>
            </a-col>
        </a-row>
    </a-form-model>
</template>

<script>
    import AppManager from "@/views/modules/share/AppManager";
    export default {
        name: "FormCodegenProjectEdit1",
        mixins:[AppManager],
        props:["formData"],
        data() {
            return {
                labelCol: { span:6 },
                wrapperCol: { span:18 },
                labelCol1: { span:3 },
                wrapperCol1: { span:19 },
                settingJson:{},
                rules: {
                    name: [{required: true, message: this.i18n('name','请输入名称','input'), trigger: 'change'}],
                    key: [
                        {required: true, message:  this.i18n('key','请输入别名','input'), trigger: 'change'},
                        {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                    ],
                    treeId: [{required: true, message: this.i18n('category','请选择分类','input'), trigger: 'change'}],
                    port: [{required: true, message: this.i18n('port','请选择端口号','input'), trigger: 'change'}]
                }
            }
        },
        created() {
            this.isUserManager();
            this.init();
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"formCodegenProject.edit1",key);
            },
            i18n2(name,text,key){
                return this.$ti18(name,text,"formBoEntity",key);
            },
            init(){
                let settingJson=this.formData.settingJson;
                if(settingJson){
                    this.settingJson=JSON.parse(settingJson);
                }
            },
            handleSubmit(self, this_,callback) {
                this_.$refs.form.validate(valid => {
                    if(valid){
                        this_.formData.settingJson = JSON.stringify(this_.settingJson);
                        this_.$emit("changeForm", this_.formData);
                    }
                    callback(!valid);
                })
            }
        },
        watch:{
            formData:{
                handler:function(){
                    this.init();
                },
                deep:true
            }
        }
    }
</script>

<style scoped>
.x-a-form-model >>> .ant-form-item{
    margin-bottom: 10px!important;
}
</style>